<template>
  <div id="app">
    <div v-if="!isStandalonePage">
      <!-- 顶部导航栏 -->
      <header class="header">
        <div class="container">
          <!-- 使用上传到 src/assets 的 logo 图片 -->
          <img src="@/assets/logo.png" alt="SparkieLink Logo" class="logo animate__animated animate__pulse animate__infinite" />
          <nav class="navbar">
            <router-link to="/" class="nav-link">产品介绍</router-link>
            <router-link to="/" class="nav-link">关于我们</router-link>
            <router-link to="/login" class="nav-link">登录/注册</router-link>
            <router-link to="/document" class="nav-link">产品文档</router-link>
          </nav>
        </div>
      </header>

      <!-- 主体内容 -->
      <div class="main-section">
        <main class="content">
          <transition name="fade" mode="out-in">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </transition>
        </main>
      </div>

      <!-- 页脚 -->
      <footer class="footer">
        <div class="container">
          <p>© 2025 SparkieLink. All rights reserved.</p>
        </div>
      </footer>
    </div>
    <div v-else class="standalone-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// 判断是否为独立页面
const isStandalonePage = computed(() => {
  const standaloneRoutes = [
    "/login",
    "/teacher",
    "/student",
    "/Group",
    "/leader-dashboard",
    "/task-calendar",
    "/tasks",
    "/settings",
    "/reference-questionnaire",
    "/discussion",
    "/members",
    "/student-scoring"
  ];
  return standaloneRoutes.includes(route.path);
});
</script>

<style>
@import './styles/global.css';

.document-link {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.document-link:hover {
  color: #f97316;
  text-decoration: underline;
}

/* 设置 logo 图片的样式 */
.logo {
  width: 25%;
  height: auto;
  margin-right: 10px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* 导航栏样式增强 */
.navbar {
  display: flex;
  align-items: center;
}

.nav-link {
  margin: 0 15px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: #f97316;
  transform: translateY(-2px);
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #f97316;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* 页脚样式增强 */
.footer {
  background-color: #1d4ed8;
  padding: 15px 0;
  width: 100%;
}

.footer p {
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 独立页面样式 */
.standalone-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f8fb;
}

/* 过渡动画增强 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>